<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
</head>
<body>
	<canvas id="canvas-game" style="border: 1px solid black;" width="500" height="500"></canvas>
	<ul id="terrain-list" style="margin: 0px; padding: 0px;"></ul>
	<button id="exportBtn">Download</button>
	<a id="downloadJson" style="display:none"></a>
	<button id="importBtn";">Import Map</button>
	<input type="file" name="mapImport" id="mapImport" style="display: none;">
	<button id="resetBtn">Reset</button>
	<!-- <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> -->
	<script type="text/javascript" src="/client/js/socket.io-1.4.5.js"></script>
	<script type="text/javascript" src="/client/js/functions.js"></script>
	<script type="text/javascript" src="/client/js/map_manager.js"></script>
	<script type="text/javascript" src="/client/js/terrain.js"></script>
	<script type="text/javascript">
	var canvas = document.getElementById("canvas-game");
	var ctx = document.getElementById("canvas-game").getContext('2d');
	var img = undefined;
	var terrainSelected = {"name":"black","x":'black',"y":32,"bgx":"-564px","bgy":"-110px","hp":1,"undestructable":true,"collision":false,"redraw":false};
	var mouseInCanvas = false;
	var mousePosition = {x:undefined,y:undefined};
	var documentReady = false;


	var terrainList;
	function ajaxRequest(url,callback){
		var request = new XMLHttpRequest();
		request.open('GET',url,true);
		request.onload = function() {
			if(request.status >= 200 && request.status < 400){
				var data = JSON.parse(request.responseText);
				callback(request.responseText);
			}else{
				console.log("Server error");
				return false;
			}
		};
		request.onerror = function() {
			console.log("Connection error");
			return false;
		};
		request.send();
	}
	var map = MapManager();

	document.getElementById('exportBtn').addEventListener('click',MapManager.exportMap);
	document.getElementById('importBtn').addEventListener('click',MapManager.importMap);
	document.getElementById('resetBtn').addEventListener('click',MapManager.reset);
	document.getElementById('mapImport').addEventListener('change',MapManager.readJson);

	function getMousePos(canvas, event){
		var rect = canvas.getBoundingClientRect();
		return {
			x: event.clientX - rect.left,
			y: event.clientY - rect.top
		};
	}
	canvas.onmouseover = function(event){
		mouseInCanvas = true;
	}
	canvas.onmouseout = function(event){
		mouseInCanvas = false;
	}
	canvas.addEventListener('mousemove', function(event) {
		mousePosition = getMousePos(canvas, event);
	},false);
	canvas.addEventListener('click',function(event){
		Terrain.searchTarget(mousePosition,map.data);
	});
	
	var strToJson = function(str){
		try{
			str = JSON.parse(str);
			return str;
		}catch(e){
			console.log(e);
		}
	}
	var initialize = function(){
		terrainList = ajaxRequest('/client/js/terrainList.json',function(data){
			terrainList = JSON.parse(data);
		});
		MapManager.reset();
		img = new Image();
		img.src = '/client/img/sprites.png';
		img.onload = function(){
			Terrain.renderList(document.getElementById('terrain-list'));
		}
	}
	setInterval(function(){
		if(!documentReady){
			initialize();
			documentReady = true;
		}
		//return;
		ctx.clearRect(0,0,500,500);
		for(var i in map.data){
			for(var k in map.data[i]){
				var target = map.data[i][k];
				if(target.hovered(mousePosition) && mouseInCanvas){
					if(terrainSelected.x === "black"){
						ctx.fillStyle = 'black';
						ctx.fillRect(target.x,target.y,target.width,target.height);
						ctx.strokeStyle = "#FFFFFF";
						ctx.lineWidth = 3;
						ctx.strokeRect(target.x,target.y,target.width,target.height);
					}else{
						ctx.drawImage(img,terrainSelected.x,terrainSelected.y,16,16,target.x,target.y,25,25);
						target.draw();
					}
				}else{
					if(target.defined){
						var data = target.defined;
						if(data.name === "black"){
							ctx.fillStyle = 'black';
							ctx.fillRect(target.x,target.y,target.width,target.height);	
						}else{
							ctx.drawImage(img,data.x,data.y,16,16,target.x,target.y,25,25);
						}
					}
					
				}
				
				
			}
		}
	});


	</script>
</body>
</html>